import React, { useEffect, useState, useMemo } from 'react'
import EchartsForReact from 'echarts-for-react'
import axios from 'axios'
export default function EchartBar() {
    const [list, setList] = useState([])
    const fetchData = () => {
        axios.get('http://www.zhaijizhe.cn:3006/chart/line').then(res => {
            setList(res.data)
        })
    }
    const options = useMemo(() => {
        return {
            title: {
                text: '某公司2023年销售情况'
            },
            xAxis: {
                data: list.map(item => item.name)
            },
            yAxis: {},
            series: [
                {
                    type: 'bar',
                    data: list.map(item => item.value)
                }
            ]
        }
    }, [list])
    useEffect(()=>{
        fetchData()
    },[])
    return (
        <EchartsForReact style={{ width: '500px', height: '300px' }} option={options}></EchartsForReact>
    )
}
